<template>
  <div style="padding: 20px">
    <div class="headerBoxList">
  <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C29.5228 44 34.5228 41.7614 38.1421 38.1421C41.7614 34.5228 44 29.5228 44 24C44 18.4772 41.7614 13.4772 38.1421 9.85786C34.5228 6.23858 29.5228 4 24 4C18.4772 4 13.4772 6.23858 9.85786 9.85786C6.23858 13.4772 4 18.4772 4 24C4 29.5228 6.23858 34.5228 9.85786 38.1421C13.4772 41.7614 18.4772 44 24 44Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M24 11C25.3807 11 26.5 12.1193 26.5 13.5C26.5 14.8807 25.3807 16 24 16C22.6193 16 21.5 14.8807 21.5 13.5C21.5 12.1193 22.6193 11 24 11Z" fill="#333"/><path d="M24.5 34V20H23.5H22.5" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 34H28" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
      <span style="margin-left: 10px"
        >拦截信息
      </span>
      <el-button
    style="margin-left: auto;"
    type="primary"
    size="mini"
    @click="printJson"
  >
    打印 JSON
  </el-button>
    </div>
    <div class="content">
    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        prop="content"
        label="内容"
        >
        <template slot-scope="scope">
            <div>内容：{{scope.row.body}}</div>
            <div>时间：{{formDate(scope.row.date)}}</div>
            <div>电话 ：{{scope.row.phone}}</div>
        </template>
      </el-table-column>
    </el-table>
      <div class="block">
    <el-pagination
      :small='true'
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="offset"
      :page-sizes="[20, 50, 100, 200]"
      :page-size="limit"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
    </div>
  </div>
</template>
  
  <script>
  import { getHuaWeiInfoApi } from "@/api/phoneInfo/index"
  import { parseTime } from '@/utils/index'
export default {
  props:['sendData'],
  name: "huweiInterceptionMsg",
  data() {
    return {
      list: [],
      offset:1,
      limit:1000,
      total: 0,
    };
  },
  mounted() {
    this.init();
  },
  watch: {
    "$store.state.account.huawei": function () {
      this.tableData = [];
    this.init()
    },
  },
  methods: {
    printJson() {
  if (!this.list || this.list.length === 0) {
    this.$message.warning("暂无数据可打印");
    return;
  }

  const data = this.list.map(item => ({
    内容: item.body,
    时间: this.formDate(item.date),
    电话: item.phone
  }));

  printJS({
    printable: data,
    type: "json",
    properties: ["内容", "时间", "电话"],
    header: "拦截信息",
    style: "table, th, td {border:1px solid #ccc;padding:6px;}"
  });
},
    formDate(date){
        return parseTime(date)
    },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.limit = val;
        this.init()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.offset = val;
        this.init()
      },
    init() {
        let data = {
            proof_num : this.sendData.proof_num,
            harassmentType:'msglist',
            offset:this.offset,
            limit:this.limit
        }
        getHuaWeiInfoApi(data).then(res=>{
            this.list = res.data;
            if(res.data.length ==0)this.total = 0
            this.total = res.data[0].cnt
        }).catch(error=>{

        })
    },
  },
};
</script>
  
  <style scoped>
.headerBoxList {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #d2d2d2;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}
.content {
  height: 80vh;
  overflow-y: auto;
  /* padding-left: 50px; */
  margin-top: 20px;
}
@media screen and (min-width: 2360px) {
  .content {
    height: 67vh;
    overflow-y: auto;
  }
}
</style>